<template>
  <el-pagination
    ref="paginationRef"
    v-model:current-page="currentPage"
    v-model:page-size="size"
    :page-sizes="[20, 50, 100]"
    background
    :pager-count="5"
    :layout="showJumper ? 'total, sizes, prev, pager, next, jumper' : 'total, sizes, prev, pager, next'"
    :total="props.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script setup>
import { ref, onMounted } from "vue";
import app from "@/common/config/app";

/** 公共组件分页参数 */
const props = defineProps(["pageNum", "pageSize", "total"])
/** 当前页 */
const currentPage = ref(props.pageNum)
/** 每页数量 */
const size = ref(props.pageSize)
/** 分页组件实例 */
const paginationRef = ref()
/** 是否显示跳转,true为显示 */
const showJumper = ref(false)

const emits = defineEmits(["handleSizeChange", "handleCurrentChange"])

const handleSizeChange = (val) => {
  emits("handleSizeChange", val)
}
const handleCurrentChange = (val) => {
  emits("handleCurrentChange", val)
}

// 监听分页宽度变化
const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    // 小于450px时，隐藏跳转jumper
    if (entry.contentRect.width < app.paginationWidth) {
      showJumper.value = false
    } else {
      showJumper.value = true
    }
  }
})

onMounted(() => {
  resizeObserver.observe(paginationRef.value.$el)
})
</script>

<style lang="scss" scoped>
.el-pagination {
  padding: 10px;
  justify-content: end;
}
</style>